﻿
@{
    ViewBag.Title = "User";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



<div class="page-group">
    <div class="page">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left" href="/home/index">
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title">个人中心</h1>
        </header>
        <nav class="bar bar-tab">
            <a class="tab-item external" href="#">
                <span class="icon icon-home"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item external  active" href="#">
                <span class="icon icon-me"></span>
                <span class="tab-label">我</span>
            </a>
            <a class="tab-item external" href="#">
                <span class="icon icon-star"></span>
                <span class="tab-label">收藏</span>
            </a>
            <a class="tab-item external" href="#">
                <span class="icon icon-settings"></span>
                <span class="tab-label">设置</span>
            </a>
        </nav>
        <div class="content">
            <!-- 这里是页面内容区 -->
            <div class="buttons-tab">
                <a href="#tab1" class="tab-link active button">信息1</a>
                <a href="#tab2" class="tab-link button">信息2</a>
                <a href="#tab3" class="tab-link button">信息3</a>
            </div>
            <div class="content-block">
                <div class="tabs">
                    <div id="tab1" class="tab active">
                        <div class="content-block">
                            <div class="content-block-title">图标、标题和副标题</div>
                            <div class="list-block">
                                <ul>
                                    <li class="item-content">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">商品名称</div>
                                            <div class="item-after">杜蕾斯</div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">型号</div>
                                            <div class="item-after">极致超薄型</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="content-block-title">标题和副标题</div>
                            <div class="list-block">
                                <ul>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title">商品名称</div>
                                            <div class="item-after">杜蕾斯</div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title">型号</div>
                                            <div class="item-after">极致超薄型</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="content-block-title">带箭头</div>
                            <div class="list-block">
                                <ul>
                                    <li class="item-content item-link">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">商品名称</div>
                                            <div class="item-after">杜蕾斯</div>
                                        </div>
                                    </li>
                                    <li class="item-content item-link">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">型号</div>
                                            <div class="item-after">极致超薄型</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="tab2" class="tab">
                        <div class="content-block">
                            <p>This is tab 2 content</p>
                        </div>
                    </div>
                    <div id="tab3" class="tab">
                        <div class="content-block">
                            <p>This is tab 3 content</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


